<template>
    <div>


        <div class="weight-bold font-17" style="font-weight: 700;">发布帖子</div>
        <div style="margin-top: 20px;">
            <span style="font-size: 14px;font-weight: 600;color: #666;margin-right: 5px;">用户</span>
            <el-input placeholder="请输入用户" style="width: 500px" :disabled="true" v-model="name"></el-input>
        </div>
        <div class="mt-10">
            <span class="color-999 font-15 ">帖子内容</span>
        </div>
        <el-input class="marginTop10" v-model="form.content" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }"
            placeholder="分享一下此刻的美好吧~"></el-input>
        <div class="mt-10">
            <el-upload :accept="imageAccept" :action="uploadApiCreate" :data="{ file_type: 'image' }" :file-list="file_list"
                :headers="headers" :limit="9" multiple :on-success="handleSuccess" list-type="picture-card">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>

        <div style="margin-top: 20px;margin-left: 35px;">
            <span style="font-size: 14px;font-weight: 600;color: #666;margin-right: 5px;">是否广告</span>
            <template>
                <el-radio v-model="form.is_ad" :label="1">是</el-radio>
                <el-radio v-model="form.is_ad" :label="0">否</el-radio>
            </template>
        </div>


        <el-form :model="form" label-width="100px" ref="form" v-if="form.is_ad" style="margin-top: 20px;">
            <el-form-item label="广告标题" size="300">
                <el-input placeholder="请输入作品集数" style="width: 500px" v-model="form.ad_name"></el-input>
            </el-form-item>

            <el-form-item label="广告描述" size="300">
                <el-input placeholder="请输入作品集数" style="width: 500px" v-model="form.ad_desc"></el-input>
            </el-form-item>

            <el-form-item label="广告外部链接" size="300">
                <el-input placeholder="请输入作品集数" style="width: 500px" v-model="form.ad_url"></el-input>
            </el-form-item>

            <el-form-item label="广告链接类型">
                <template>
                    <el-radio v-model="form.ad_type" label="outside">外部</el-radio>
                    <el-radio v-model="form.ad_type" label="inside">内部</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="广告结束时间" size="300">
                    <el-date-picker v-model="form.ad_end_time" type="date" placeholder="选择广告结束时间" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

            <el-form-item label="广告图标" size="300">
                <medium v-model="form.ad_icon"></medium>
            </el-form-item>

    
        </el-form>

        <div class="mt-30">
            <el-button type="primary" style="width: 470px; margin: 30px auto" :loading="submitComplete"
                @click="submit">上传</el-button>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import medium from "@/components/medium/index";
import JSEncrypt from 'jsencrypt'
import config from '@/utils/config'
export default {
    components: {
        medium
    },
    computed: {
        ...mapGetters(['uploadApiCreate']),
        headers() {
            return {
                Authorization: 'Bearer ' + this.$store.state.user.token,
            }
        },
    },
    data() {
        return {
            form: {
                creation_type: 'infomation',
                content: "",
                media_urls: [],
                user_id: '',
                is_ad: 1, //是否广告
                ad_url: '',//广告链接
                ad_name: '',//广告标题
                ad_desc: '',//广告描述
                ad_icon: '',//图标
                ad_type: '',//广告链接类型
                ad_space: 'infomation',
                ad_end_time:''
            },
            name: '',
            icon_url: require('@/assets/image/upload-video-icon.png'),
            hot_labels: [],
            quit_visible: false,
            file_list: [],
            imageAccept: 'image/*',
            submitComplete: false,
        }
    },
    mounted() {
        if (this.$route.query.user_id) {
            this.form.user_id = this.$route.query.user_id
            this.getUserList(this.$route.query.user_id);
        }
    },
    methods: {
        getUserList(user_id) {
            let that = this
            this.$request.get('/user/index', { page: 1, size: 10, id: user_id }).then((res) => {
                console.log(res.items[0], 111)
                this.form.user_id = res.items[0].id
                that.name = res.items[0].name

                // this.init()
            })
        },
        handleSuccess(response) {
            let decrypt = new JSEncrypt()
            decrypt.setPrivateKey(config.cert.privateKey)
            var decryptMsg = decrypt.decryptLong(response, 'utf-8')
            response = JSON.parse(decryptMsg)
            console.log('response', response)
            if (response.code != 200) {
                this.$message.error(response.message)
                return false
            }
            this.file_list.push(response.data[0].full_path)
        },
        submit() {
            if (this.submitComplete) return
            this.submitComplete = true
            if (!this.form.content) {
                this.$message.error('请添加帖子内容')
                this.submitComplete = false
                return false
            }
            this.form.media_urls = this.file_list
            this.$request.post('/creation/create', this.form)
                .then((res) => {
                    this.submitComplete = false
                    this.$message.success('上传成功')
                    this.initForm()
                    this.$router.push({ path: "/post-details-list" });
                })
                .catch((error) => {
                    this.submitComplete = false
                })
                .finally((res) => {
                    this.submitComplete = false
                })
        },
        initForm() {
            this.form = {
                creation_type: 'infomation',
                content: "",
                media_urls: [],
                user_id: '',
                is_ad: 1, //是否广告
                ad_url: '',//广告链接
                ad_name: '',//广告标题
                ad_desc: '',//广告描述
                ad_icon: '',//图标
                ad_type: '',//广告链接类型
                ad_space: 'infomation',
                ad_end_time:''
            }
            this.file_url = ''
            this.first_frame = ''
        },
    },
    beforeDestroy() {
        if (this.quit_visible != true) {
            this.quit_visible = true
        }
    },
}
</script>

<style lang="scss" scoped>


.labels-contaniner {
    max-width: 32vw;
}

.delete-video {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: #ff1c6d;
}

.recommend_labels {
    position: absolute;
    max-width: 400px;
    min-width: 300px;
    max-height: 200px;
    overflow-y: scroll;
    background: #fff;
    padding: 12px 18px;
    border-radius: 15px;
    border: 1px solid #eee;
    margin-top: 6px;
    z-index: 1;
}

.recommend_labels::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}
</style>